<template>

	<z-paging ref="paging" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false"
		v-model="dataList" @query="queryList" :default-page-size='5'>
		<template>
			<view class="" style=" background-color: white; padding: 10px; 20px; z-index: 100;position: sticky;top :0;">
				<u-search @search="clickSearch()" @custom="clickSearch()" v-model="searchKey" :focus='true'
					:actionStyle='{"color":"rgb(52, 116, 246)"}' placeholder='可搜索关键词，按群名称搜索' :showAction="true"
					actionText="搜索" :animation="true"></u-search>
			</view>
		</template>



		<view class="grid-list" style="padding: 0px 15px;">
			<view class="grid-item" @click="clickRow(index)" v-for="(item,index) in dataList" :key="index">
				<GridItemCell :dataModel="item"> </GridItemCell>
			</view>
		</view>
	</z-paging>
	<view>
		<!-- search -->




	</view>
</template>

<script>
	import GridItemCell from '../home-page/grid-item-cell.vue'

	export default {
		components: {
			GridItemCell
		},
		data() {
			return {
				searchKey: '',
				dataList: []
			}
		},
		onLoad(option) {
			console.log('option==', option)
			this.tableType = parseInt(option.tableType);
		},
		methods: {
			queryList(pageNo, pageSize) {
				if (this.searchKey == '') {
					this.$refs.paging.complete([]);
					return
				}
				this.$uniCloudApi.search_data_list( pageNo, pageSize, this.searchKey).then(list => {
					this.$refs.paging.complete(res);
				}).catch(err => {
					this.$refs.paging.complete([]);
				});
			},

			clickSearch() {
				console.log('搜索==', this.searchKey);
				uni.showLoading({
					title: '加载中'
				})
				this.$uniCloudApi.search_data_list( 1, 5, this.searchKey).then(list => {
					this.$refs.paging.complete(list);
					uni.hideLoading();
				}).catch(err => {
					this.$refs.paging.complete([]);
					uni.hideLoading();
				});
			},
			clickRow(index) {
				var model = this.dataList[index];
				uni.navigateTo({
					url: '../resource-details-page/resource-details-page?model=' + this.$encodeJson(model)
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.grid-list {
		display: flex;
		flex-wrap: wrap;
	}

	.grid-item {
		width: 50%;
		/* 每行三个，可根据需求调整 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>